Component({
  data: {
    isShowClear: false,
    inputVal: '',
    actionText: ''
  },
  methods: {
    /**
     * 监听输入框是否输入，当输入框有值时，则显示清除图标，否则不显示
     * @param {Object} e 
     */
    handleInput(e) {
      let val = e.detail.value;
      if (val.length > 0) {
        this.setData({
          isShowClear: true
        });
      } else {
        this.setData({
          isShowClear: false
        });
      }
    },

    /**
     * 清除输入框，隐藏清除图标
     */
    clearInput() {
      this.setData({
        isShowClear: false,
        inputVal: ''
      });
    },

    /**
     * 输入框失焦事件
     */
    blurHandle() {
      this.setData({
        actionText: ''
      });
    },

    /**
     * 输入框聚焦事件
     */
    focusHandle() {
      this.setData({
        actionText: '取消'
      });
    },

    /**
     * 取消清除输入框内容与隐藏取消按钮
     */
    actionClick() {
      this.setData({
        inputVal: '',
        actionText: '',
        isShowClear: false
      });
    }
  }
});